<template>
    <el-dialog :title="$t('添加预警提醒')" :visible.sync="dialogVisible" width="40%" :before-close="handleClose"
        append-to-body>
        <el-form ref="form" :model="form" :rules="rules" label-width="120px">
            <el-form-item label="定时执行">
                <vcrontab @hide="(showCron = true)" @fill="crontabFill" :expression="expression" ref="cron"></vcrontab>
            </el-form-item>
            <el-form-item label="任务名称" prop="jobName">
                <el-input v-model="form.jobName"></el-input>
            </el-form-item>
            <el-form-item label="盘点亏损值" prop="lossNumber">
                <el-input v-model="form.lossNumber"></el-input>
            </el-form-item>
            <el-form-item label="任务说明">
                <el-input type="textarea" v-model="form.instructions"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="handleCancel">{{ $t('取消') }}</el-button>
            <el-button type="primary" @click="handleConfirm">{{ $t('确定') }}</el-button>
        </span>
    </el-dialog>
</template>
  
<script>
import { createMerJob, updateMerJob } from '@/api/merchandiseWarning';
import vcrontab from "vcrontab";

export default {
    name: 'WarningInfo',
    components: { vcrontab },
    props: {
        dialogVisible: {
            default: false,
            type: Boolean,
        },
    },
    data() {
        return {
            expression: "",
            value: undefined,
            form: {
                shopMerchandiseId: undefined,
                jobName: undefined,
                lossNumber:undefined,
            },
            rules: {
                jobName: [{ required: true, message: '请输入任务名称', trigger: 'blur' }]
            },
            showCron: false,
            type: undefined,
        }
    },
    created() {
    },
    mounted() {
    },
    updated() {
        try {
            // 历史时间
            this.$refs.cron.$el.childNodes[1].childNodes[1].hidden = true
            // 确认按钮
            this.$refs.cron.$el.childNodes[1].childNodes[2].childNodes[0].style.display = 'none';
            // 取消按钮
            this.$refs.cron.$el.childNodes[1].childNodes[2].childNodes[2].style.display = 'none';
            // console.log(this.$refs.cron);
        } catch (e) {
        }

    },
    methods: {
        crontabFill(value) {
            //确定后回传的值
            // this.input = value;
            this.form.cron = value;
            console.log(this.$refs.cron.contabValueString, value);
        },
        onChangeCron(v) {
            this.form.cron = v;
            console.log(v);
        },
        init(id, obj = {}) {
            this.type = !!obj.id;
            console.log(this.type);
            this.form = JSON.parse(JSON.stringify(obj));
            this.form.shopMerchandiseId = id;
            this.expression = this.form.cron;
            this.showCron = true;
        },
        handleCancel() {
            this.handleClose();
            this.$emit('WarningInfoCancel');
        },
        handleConfirm() {
            this.form.cron = this.$refs.cron.contabValueString;
            if (this.form.cron == '* * * * * ?') return this.$message.error(this.$t('请选择定时执行时间'));
            this.$refs.form.validate(v => {
                if (v) {
                    if (this.type) {
                        updateMerJob(this.form).then(res => {
                            this.$message.success(this.$t(res.data.errmsg));
                            this.handleCancel();
                        })
                    } else {
                        createMerJob(this.form).then(res => {
                            this.$message.success(this.$t(res.data.errmsg));
                            this.handleCancel();
                        })
                    }
                }
            })
        },
        handleClose() {
            this.$refs.form.resetFields();
            this.$refs.form.clearValidate();
            this.form = {};
            this.$emit('WarningInfoCancel');
        },
    }

}
</script>
  
<style scoped>

</style>
  